<template>
	<div>
		<el-row :span="24">
			<el-col :ms="24" :xs="0">
				<PcHedaer ref="pcHedaer"></PcHedaer>
				<div class="pc_con">
					<PcDrawer ref="pcDrawer" :navIndex="navIndex1" :navs="navs" :changeNav="changeNav1"></PcDrawer>
					<div class="pc_conbox">
						<div class="pc_conboxs">
							<div class="navbar">
								<div class="left" @click="back1">
									<i style="display: inline-flex; justify-content: center; align-items: center;">
										<svg viewBox="0 0 21.999 35.998" width="1em" height="1em" fill="currentColor"
											aria-hidden="true" focusable="false">
											<use xlink:href="/icons/icon.svg#comm_icon_fh--sprite"></use>
										</svg>
									</i>
									<span>{{$t('l_fanhui')}}</span>
								</div>
								<div class="center">
									<img style="transform: rotate(180deg);" src="../../assets/images/yh/jiantou.png"
										alt="">
									<div class="pc_title">{{$t('l_tixian')}}</div>
									<img src="../../assets/images/yh/jiantou.png" alt="">
								</div>
								<div class="left" style="justify-content: flex-end;"></div>
							</div>
							<div class="con">
								<div class="w8hvCePe2cr4lZDHWfAo">
									<div class="AZ93sQuJsiyisJNOP80k">
										<div>{{$t('l_zhanghuyue')}}</div>
										<div class="flex">
											<div class="text">{{info?info.money:0}}</div>
											<div class="icon" @click="tixianInfo">
												<i
													style="display: inline-flex; justify-content: center; align-items: center;">
													<svg viewBox="0 0 24 25.144" width="1em" height="1em"
														fill="currentColor" aria-hidden="true" focusable="false">
														<use xlink:href="/icons/icon.svg#comm_icon_sx--sprite"></use>
													</svg>
												</i>
											</div>
										</div>
									</div>
									<div class="flex">
										<div class="text1">{{$t('l_haixutouzhu')}} {{info?info.dml:0}}
											{{$t('l_jiketixian')}}
										</div>
										<div class="text2" @click="openMsg">{{$t('l_chakanxiangqing')}}</div>
									</div>
								</div>
								<div class="contab">
									<div class="tablist flex">
										<!-- <div class="hitem" :class="selecttabs == 0 ? 'active':''" @click="changetabs(0)">提现到NO钱包</div> -->
										<!-- <div class="hitem" :class="selecttabs == 1 ? 'active':''" @click="changetabs(1)">转为数字货币</div> -->
										<div class="hitem" :class="selecttabs == 2 ? 'active':''">
											{{$t('l_putongtixian')}}
										</div>
									</div>
								</div>
								<div class="on_8Q6rTBj4_IyBfeiwy" @click="BandAccounts">
									<i class="cNTagD5swIEjjApLy8HX"
										style="display: inline-flex; justify-content: center; align-items: center;">
										<svg viewBox="0 0 40 27.611" width="1em" height="1em" fill="currentColor"
											aria-hidden="true" focusable="false">
											<use xlink:href="/icons/icon.svg#comm_icon_add_bank--sprite"></use>
										</svg>
									</i>
									<span>{{setBank?`${setBank.bank_name}(${setBank.bank_card})`:$t('l_tianjiatixianzhanghu')}}
									</span>
									<div class="isO_Bw5y9PpCiFN4j60W">
										<i class="FRdiyl2DCNmb04XI0MFW"
											style="display: inline-flex; justify-content: center; align-items: center;">
											<svg viewBox="0 0 21.999 35.998" width="1em" height="1em"
												fill="currentColor" aria-hidden="true" focusable="false">
												<use xlink:href="/icons/icon.svg#comm_icon_fh--sprite"></use>
											</svg>
										</i>
									</div>
								</div>
								<div class="on_8Q6rTBj4_IyBfeiwy">
									<div class="cNTagD5swIEjjApLy8HX" style="font-size: 19px;color: #fff;">￥</div>
									<input type="text" v-model="money" :placeholder="$t('l_tixianjine')" />
								</div>
								<div class="pc_items">
									<div>{{$t('l_tixianmima')}}</div>
								</div>
								<el-input v-model="value" placeholder="" :show-password="true" />
								
								<!-- <div style="font-size: 12px;color: #fff;margin-top: 10px;" v-if="userInfo.drawing_msg!=''">
										{{ userInfo.drawing_msg }}
								</div> -->
								<div class="cdbtn" @click="tk_ts">{{$t('l_queding')}}</div>
							</div>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :ms="0" :xs="24">
				<div style="min-height: 100vh;background-color:var(--theme-bg-color);">
					<navHeader :title="$t('l_tixian')" :backCount="-2"></navHeader>

					<div>
						<div class="contop">
							<div class="w8hvCePe2cr4lZDHWfAo">
								<div class="AZ93sQuJsiyisJNOP80k">
									<div>{{$t('l_zhanghuyue')}}</div>
									<div class="flex">
										<div class="text">{{info?info.money:0}}</div>
										<div class="icon" @click="tixianInfo">
											<i
												style="display: inline-flex; justify-content: center; align-items: center;">
												<svg viewBox="0 0 24 25.144" width="1em" height="1em"
													fill="currentColor" aria-hidden="true" focusable="false">
													<use xlink:href="/icons/icon.svg#comm_icon_sx--sprite"></use>
												</svg>
											</i>
										</div>
									</div>
								</div>
								<div class="flex">
									<div class="text1">{{$t('l_haixutouzhu')}} {{info?info.dml:0}}
										{{$t('l_jiketixian')}}
									</div>
									<div class="text2" @click="openMsg">{{$t('l_chakanxiangqing')}}</div>
								</div>
							</div>
							<!-- <div class="N0JQr4MRsNlYA1VIq2VB">
								<div class="btnbox">
									<div>余额宝</div>
									<div class="btntips">
										<div class="btntipstop">88%</div>
										<div class="btntipsdown"></div>
									</div>
								</div>
							</div> -->
						</div>
						<div class="contab">
							<div class="tablist flex">
								<!-- <div class="hitem" :class="selecttabs == 0 ? 'active':''" @click="changetabs(0)">提现到NO钱包</div> -->
								<!-- <div class="hitem" :class="selecttabs == 1 ? 'active':''" @click="changetabs(1)">转为数字货币</div> -->
								<div class="hitem" :class="selecttabs == 2 ? 'active':''">{{$t('l_putongtixian')}}</div>
							</div>
						</div>
						<div class="condown">
							<!-- 	<div v-if="selecttabs == 0">
								<div>
									<div class="jBiscApwikt2YFax1AY1">
										<div class="flex1">
											<div class="cditem">
												已有账号，可登录绑定
												<div>立即绑定</div>
											</div>
											<div class="cditem">
												首次使用？只需设置支付密码
												<div class="div">立即设置</div>
											</div>
										</div>
									</div>
									<div class="sUi_j5Qv4ZADwXHpPUP_">用NO钱包：赚积分，抽大奖，最高<span>88888.88</span></div>
								</div>
							</div> -->
							<div>
								<div class="condowncon">
									<div class="on_8Q6rTBj4_IyBfeiwy" @click="BandAccounts">
										<i class="cNTagD5swIEjjApLy8HX"
											style="display: inline-flex; justify-content: center; align-items: center;">
											<svg viewBox="0 0 40 27.611" width="1em" height="1em" fill="currentColor"
												aria-hidden="true" focusable="false">
												<use xlink:href="/icons/icon.svg#comm_icon_add_bank--sprite"></use>
											</svg>
										</i>
										<span>{{setBank?`${setBank.bank_name}(${setBank.bank_card})`:$t('l_tianjiatixianzhanghu')}}
										</span>
										<div class="isO_Bw5y9PpCiFN4j60W">
											<i class="FRdiyl2DCNmb04XI0MFW"
												style="display: inline-flex; justify-content: center; align-items: center;">
												<svg viewBox="0 0 21.999 35.998" width="1em" height="1em"
													fill="currentColor" aria-hidden="true" focusable="false">
													<use xlink:href="/icons/icon.svg#comm_icon_fh--sprite"></use>
												</svg>
											</i>
										</div>
									</div>
									<div class="on_8Q6rTBj4_IyBfeiwy">
										<div class="cNTagD5swIEjjApLy8HX" style="font-size: .3rem;color: #fff;">￥</div>
										<input type="text" v-model="money" :placeholder="$t('l_tixianjine')" />
									</div>
								</div>
								<div class="Ou1aviPriFX421w97dGA">
									<div>{{$t('l_tixianmima')}}</div>
									<span class="R1tVtJPfBJA944lSRyyP" v-if="mask" @click="mask = !mask">
										<i class="M2AXg2u2tA9h8un7RCbH"
											style="display: inline-flex; justify-content: center; align-items: center;">
											<svg viewBox="0 0 26 21.514" width="1em" height="1em" fill="currentColor"
												aria-hidden="true" focusable="false">
												<use xlink:href="/icons/icon.svg#comm_icon_hide--sprite"></use>
											</svg>
										</i>
									</span>
									<span class="R1tVtJPfBJA944lSRyyP" v-if="!mask" @click="mask = !mask">
										<i class="MOFLcj7nVRZHKLivuWpP"
											style="display: inline-flex; justify-content: center; align-items: center;">
											<svg viewBox="0 0 26 21.514" width="1em" height="1em" fill="currentColor"
												aria-hidden="true" focusable="false">
												<use xlink:href="/icons/icon.svg#comm_icon_show--sprite"></use>
											</svg>
										</i>
									</span>
								</div>
								<!-- 密码输入框 -->
								<van-password-input :value="value" :mask="mask" :info="$t('l_mimaliuwei')"
									:focused="showKeyboard" @focus="showKeyboard = true" />
								<!-- 数字键盘 -->
								<van-number-keyboard v-model="value" :show="showKeyboard"
									@blur="showKeyboard = false" />

								<!-- <div style="font-size: 0.22rem;color: #fff;margin-top: 1rem;" v-if="userInfo.drawing_msg!=''">
										{{ userInfo.drawing_msg }}
								</div> -->

								<div class="cdbtn" @click="tk_ts">{{$t('l_queding')}}</div>
							</div>

						</div>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import navHeader from '../../components/navHeader.vue'
	import PcHedaer from '../../components/pcheader.vue'
	import PcDrawer from '../../components/pcdrawer.vue'
	export default {
		components: {
			navHeader,
			PcHedaer,
			PcDrawer
		},
		data() {
			return {
				selecttabs: 2,
				value: '',
				mask: true,
				showKeyboard: false,

				value1: '',
				mask1: true,
				showKeyboard1: false,
				info: null,
				setBank: null,
				money: '',

				navs: [{
						id: 0,
						name: this.$t('l_remen'),
						key: 'icon_game_menu_active_0',
					},
					{
						id: 2,
						name: this.$t('l_dianzi'),
						key: 'icon_game_menu_active_3',
					},
					{
						id: 7,
						name: this.$t('l_qipai'),
						key: 'icon_game_menu_active_1',
					},
					{
						id: 6,
						name: this.$t('l_buyu'),
						key: 'icon_game_menu_active_2',
					},
					{
						id: 1,
						name: this.$t('l_zhenren'),
						key: 'icon_game_menu_active_4',
					},
					{
						id: 4,
						name: this.$t('l_tiyu'),
						key: 'icon_game_menu_active_5',
					},
					{
						id: 3,
						name: this.$t('l_caipiao'),
						key: 'icon_game_menu_active_8',
					},

					// {
					// 	id: -2,
					// 	name: '最 近',
					// 	key: 'icon_game_menu_active_100',
					// },
					// {
					// 	id: -3,
					// 	name: '收 藏',
					// 	key: 'icon_game_menu_active_101',
					// },
					{
						id: -4,
						name: this.$t('l_sousuo'),
						key: 'comm_icon_ss',
					},
				],
				navIndex1: 0,
				userInfo:{}
			}
		},
		mounted() {
			console.log('ddddwo')
			// this.$alert('test', '', {
			// 			confirmButtonText: 'ok',
			// 			customClass:"messagestyle",
			// 			callback: action => {
			// 				// that.tixian()
			// 			}
			// 		});
			this.setBank = localStorage.getItem('setbank')
			if (this.setBank) {
				this.setBank = JSON.parse(this.setBank)
				console.log(this.setBank)
			}
			this.reloadUserInfo()
			this.tixianInfo()
		},
		methods: {
			back1() {
				this.$router.go(-1)
			},
			openMenus() {
				this.$refs.pcDrawer.openMenus()
			},
			closeMenus() {
				this.$refs.pcDrawer.closeMenus()
			},
			changeNav1(item) {
				this.$router.push('/')
			},
			reloadUserInfo(reload = false) {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.userGetUserInfo({
					reload: reload ? 1 : 0
				}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.userInfo = res.data
						localStorage.setItem('userInfo', JSON.stringify(res.data))
						if (this.userInfo.pay_password != 1) {
							this.$router.push('./security?set=1')
						}
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			tk_ts(){
				var that=this;
				if(this.userInfo.drawing_msg!=null&&this.userInfo.drawing_msg!=''){
					this.$alert(this.userInfo.drawing_msg, '', {
						confirmButtonText: 'ok',
						customClass:"messagestyle",
						callback: action => {
							that.tixian()
						}
					});
					
				}else{
					that.tixian()
					
				}
				
			},
			tixian() {
			console.log('提现备注信息',this.userInfo.drawing_msg)
			
				if (!this.setBank) {
					this.$message.error(this.$t('l_qingxuanzetixianfangshi'));
					return false;
				}
				if (!this.money) {
					this.$message.error(this.$t('l_tixianjinebuweikong'));
					return false;
				}
				if (!this.value) {
					this.$message.error(this.$t('l_tixianmimabuweikong'));
					return false;
				}
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.tixian({
					money: this.money,
					id: this.setBank.bank_id,
					pay_password: this.value.substring(0, 6),
				}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.$message.success(this.$t('l_tijiaochenggongdengdaishenhe'));
						this.reloadUserInfo(true);
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			tixianInfo() {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.tixianInfo({}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.info = res.data
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			openMsg() {
				this.$alert(this.info.tixian_msg, this.$t('l_shuoming'), {
					confirmButtonText: this.$t('l_haode'),
				});
			},
			changetabs(e) {
				console.log(e)
				this.selecttabs = e.toString();
			},
			BandAccounts() {
				this.$router.push('./accounts')
			}
		}
	}
</script>

<style lang="less" scoped>
	* {
		box-sizing: border-box;
	}

	.header {
		width: 100%;
		background: var(--theme-main-bg-color);
		height: 46px;
		border: 1px solid var(--theme-color-line);
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.back {
		color: #ffffff;
		font-size: .18rem;
		height: 100%;
		width: 0.5rem;
		margin-right: 0.3rem;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.hitem {
		height: 45px;
		border-bottom: 2px solid transparent;
		line-height: 45px;
		font-size: 12px;
		color: #fff;
		margin-right: 0.3rem;
	}

	.hitem:last-child {
		margin-right: 0;
	}

	.hitem.active {
		color: var(--theme-primary-color);;
		border-bottom: 2px solid var(--theme-primary-color);
	}

	.contop {
		align-items: center;
		// background-color: var(--theme-top-nav-bg);;
		height: auto;
		justify-content: space-between;
		padding: 0.2rem;
		width: 100%;
		display: flex;
		text-align: right;
	}

	.w8hvCePe2cr4lZDHWfAo {
		font-size: .22rem;
	}

	.AZ93sQuJsiyisJNOP80k {
		justify-content: flex-start;
		margin-bottom: 0.15rem;
		align-items: center;
		color: #ffffff;
		display: flex;
	}

	.flex {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.text {
		color: #ffaa09;
		font-size: .26rem;
		margin: 0 0.073rem 0 0.1rem;
	}

	.icon {
		font-size: .293rem;
		color: var(--theme-primary-color);;
	}

	.text1 {
		color: var(--theme-alt-neutral-2);
	}

	.text2 {
		color: var(--theme-primary-color);
	}

	.N0JQr4MRsNlYA1VIq2VB {
		color: var(--theme-alt-neutral-2);
		align-items: center;
		display: flex;
	}

	.btnbox {
		color: #ffffff;
		background-color: var(--theme-primary-color);
		margin-left: 0.2rem;
		display: flex;
		font-size: .2rem;
		height: 0.5rem;
		justify-content: center;
		width: 1.2rem;
		align-items: center;
		border-radius: 0.14rem;
		position: relative;
	}

	.btntips {
		height: 0.32rem;
		left: 40%;
		position: absolute;
		right: unset;
		top: -0.22rem;
		width: 30px;
		z-index: 100;
	}

	.btntipstop {
		height: 0.26rem;
		line-height: .26rem;
		padding: 0 0.07rem;
		background-color: #ea4e3d;
		border-radius: 0.125rem 0.125rem 0.125rem 0;
		color: #fff;
		margin-bottom: 0;
	}

	.btntipsdown {
		border-bottom: 0.07rem solid transparent;
		border-left: 0.07rem solid #ea4e3d;
		border-right: 0.07rem solid transparent;
		height: 0;
		width: 0;
		font-size: .15rem !important;
	}

	.contab {
		// background-color: var(--theme-top-nav-bg);;
		width: 100%;
		height: 100%;
		padding: 0 0.2rem;
	}

	.tablist {
		// background-color: var(--theme-top-nav-bg);;
		padding-top: 0.1rem;
		position: relative;
		border-top: 1px solid var(--theme-color-line);
		border-bottom: 1px solid var(--theme-color-line);
	}

	.condown {
		padding: 0 0.2rem;
		width: 100%;
		margin: 0.3rem auto 0;
	}

	.jBiscApwikt2YFax1AY1 {
		margin: 0.3rem 0;
		text-align: center;
	}

	.flex1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.cditem {
		color: var(--theme-alt-neutral-2);
		font-size: .18rem;
		width: calc(50% - 0.1rem);
	}

	.cditem div {
		height: auto;
		margin-top: 0.1rem;
		padding: 0.13rem 0;
		width: 100%;
		border: 1px solid var(--theme-primary-color);
		color: var(--theme-primary-color);
		border-radius: 0.14rem;
	}

	.cditem .div {
		height: auto;
		margin-top: 0.1rem;
		padding: 0.13rem 0;
		width: 100%;
		background-color: var(--theme-primary-color);
		color: #fff;
		border-radius: 0.14rem;
	}

	.sUi_j5Qv4ZADwXHpPUP_ {
		color: #ffffff;
		margin-top: 0.3rem;
		font-size: 14px;
		text-align: center;
	}

	.sUi_j5Qv4ZADwXHpPUP_ span {
		color: #ffaa09;
	}

	.condowncon {
		width: 100%;
		border-bottom: 0.01rem solid var(--theme-color-line);
	}

	.on_8Q6rTBj4_IyBfeiwy {
		border-radius: 0.14rem;
		font-size: .22rem;
		height: 0.7rem;
		line-height: .7rem;
		margin-bottom: 0.5rem;
		text-indent: 0.05rem;
		align-items: center;
		// background-color: var(--theme-top-nav-bg);;
		border: 1px solid var(--theme-color-line)!important;
		background-color: var(--theme-main-bg-color);
    // border-color: var(--theme-color-line)!important;
		display: flex;
		padding: 0 0.15rem;
		position: relative;
	}

	.cNTagD5swIEjjApLy8HX {
		font-size: .4rem;
		color: var(--theme-primary-color);
	}

	.on_8Q6rTBj4_IyBfeiwy span {
		color: #ffffff;
		margin-left: 0.15rem;
	}

	.isO_Bw5y9PpCiFN4j60W {
		font-size: .4rem;
		align-items: center;
		color: var(--theme-color-line);
		display: flex;
		position: absolute;
		right: 0.15rem;
		margin-left: 0.15rem;
		font-size: .2rem;
		transform: rotate(180deg);
	}

	.on_8Q6rTBj4_IyBfeiwy input {
		flex: 1;
		height: 0.7rem;
		padding: 0 0.1rem;
		font-size: .22rem;
		color: #ffffff;
		background: none;
		outline: none;
		border: 0px;
	}

	input::-webkit-input-placeholder {
		/* placeholder颜色  */
		color: #394b67;
	}

	.Ou1aviPriFX421w97dGA {
		width: 100%;
		color: #ffffff;
		font-size: .22rem;
		height: 0.32rem;
		margin-bottom: 0.15rem;
		margin-top: 0.3rem;
		align-items: center;
		display: flex;
		justify-content: space-between;
	}

	.R1tVtJPfBJA944lSRyyP {
		font-size: .36rem;
	}

	.M2AXg2u2tA9h8un7RCbH {
		color: var(--theme-color-line);
	}

	.MOFLcj7nVRZHKLivuWpP {
		color: var(--theme-primary-color);
	}

	/deep/ .van-password-input {
		margin: 0;
	}

	/deep/ .van-password-input__security li {
		// background-color: var(--theme-top-nav-bg);;
		background: var(--theme-main-bg-color);
		color: #fff;
	}

	/deep/ .van-password-input__security i {
		background-color: #fff;
	}

	/deep/ .van-password-input__info {
		margin-top: 0.1rem;
		color: #ea4e3d;
		font-size: .18rem;
		height: 0.4rem;
		line-height: 1;
		margin-bottom: -0.4rem;
		text-align: left;
	}

	.cdbtn {
		border-radius: 0.14rem;
		font-size: .24rem;
		height: 0.7rem;
		width: 100%;
		background-color: var(--theme-primary-color);
		border-color: var(--theme-primary-color);
		color: #fff;
		text-align: center;
		line-height: 0.7rem;
		margin-top: .5rem;
	}

	.pc_conboxs .con {
		flex: 1;
		height: auto;
		background-color: var(--theme-top-nav-bg);;
		border-radius: 10px;
		position: relative;
		padding: 10px 15px 15px 15px;
		margin-top: 15px;
	}

	.pc_conboxs {
		.w8hvCePe2cr4lZDHWfAo {
			font-size: 14px;
		}

		.AZ93sQuJsiyisJNOP80k {
			justify-content: flex-start;
			margin-bottom: 10px;
			align-items: center;
			color: #ffffff;
			display: flex;
		}

		.flex {
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}

		.text {
			color: #ffaa09;
			font-size: 17px;
			margin: 0 8px;
			margin-top: 2px;
		}

		.icon {
			font-size: 17px;
			color: var(--theme-primary-color);
			margin-top: 5px;
		}

		.text1 {
			color: var(--theme-alt-neutral-2);
		}

		.text2 {
			color: var(--theme-primary-color);
		}

		.contab {
			background-color: var(--theme-top-nav-bg);;
			width: 100%;
			height: 100%;
			padding: 0;
			margin-top: 15px;
		}

		.tablist {
			background-color: var(--theme-top-nav-bg);;
			padding-top: 7px;
			position: relative;
			border-top: 1px solid var(--theme-color-line);
			border-bottom: 1px solid var(--theme-color-line);
		}

		.hitem {
			height: 45px;
			border-bottom: 2px solid transparent;
			line-height: 45px;
			font-size: 14px;
			color: #fff;
			margin-right: 23px;
		}

		.hitem:last-child {
			margin-right: 0;
		}

		.hitem.active {
			color: var(--theme-primary-color);
			border-bottom: 2px solid var(--theme-primary-color);
		}

		.on_8Q6rTBj4_IyBfeiwy {
			border-radius: 7px;
			font-size: 14px;
			height: 39px;
			line-height: 39px;
			margin-bottom: 23px;
			text-indent: 4px;
			align-items: center;
			background-color: var(--theme-top-nav-bg);;
			border: 1px solid var(--theme-color-line);
			display: flex;
			padding: 0 12px;
			position: relative;
			margin-top: 23px;
		}

		.cNTagD5swIEjjApLy8HX {
			font-size: 23px;
			color: var(--theme-primary-color);
		}

		.isO_Bw5y9PpCiFN4j60W {
			font-size: 15px;
			align-items: center;
			color: var(--theme-color-line);
			display: flex;
			position: absolute;
			right: 15px;
			margin-left: 11px;
			transform: rotate(180deg);
		}

		.on_8Q6rTBj4_IyBfeiwy span {
			color: #ffffff;
			margin-left: 11px;
		}

		.on_8Q6rTBj4_IyBfeiwy input {
			flex: 1;
			height: 39px;
			padding: 0 12px;
			font-size: 14px;
			color: #ffffff;
			background: none;
			outline: none;
			border: 0px;
		}

		.cdbtn {
			border-radius: 7px;
			font-size: 15px;
			height: 41px;
			width: 124px;
			background-color: var(--theme-primary-color);
			border-color: var(--theme-primary-color);
			color: #fff;
			text-align: center;
			line-height: 41px;
			margin: 0 auto;
			margin-top: 23px;
		}

		/deep/ .el-input__inner {
			width: 99% !important;
			height: 45px !important;
			border-radius: 0 !important;
			font-size: 14px !important;
			padding: 0 !important;
			border: 1px solid var(--theme-color-line) !important;
			border-radius: 7px !important;
			padding: 0 7px !important;
		}
	}

	.pc_items {
		width: 100%;
		color: #ffffff;
		font-size: 14px;
		height: 20px;
		margin-bottom: 9.5px;
		align-items: center;
		display: flex;
		justify-content: space-between;
		padding-top: 23px;
		border-top: 1px solid var(--theme-color-line);
	}

	.pc_items i {
		font-size: 20px;
	}

	.pc_items .icons {
		color: var(--theme-color-line);
	}

	.pc_items .icons1 {
		color: var(--theme-primary-color);
	}

	.el-input {
		flex: 1;
		margin: 23px 0;
	}

	/deep/ .el-input__inner {
		width: 99% !important;
		height: 45px !important;
		border: 0 !important;
		border-radius: 0 !important;
		font-size: 14px !important;
		padding: 0 !important;
		border: 1px solid var(--theme-color-line) !important;
		border-radius: 7px !important;
		padding: 0 7px !important;
	}

	/deep/ .el-input__icon {
		width: 25px !important;
		line-height: 40px !important;
		font-size: 14px !important;
	}

	/deep/ .el-input__suffix {
		display: block !important;
		right: 22px !important;
	}

</style>